import React, { useState } from 'react';
import { history } from 'umi';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import ProCard from '@ant-design/pro-card';
import ProForm from '@ant-design/pro-form';
import {
  Button,
  Form,
  message,
  Input,
  Select,
  Row,
  Col,
  DatePicker,
  TimePicker,
  Modal,
} from 'antd';
import moment from 'moment';

const { TextArea } = Input;
const { Option } = Select;
const Interview: React.FC = () => {
  const [loading, setLoading] = useState(false);
  const [visible, setVisible] = useState(false);
  const today = moment(); // 当天日期


  const format = 'HH:mm';

  const waitTime = (time: number = 100) => {
    return new Promise((resolve) => {
      setLoading(true);
      setTimeout(() => {
        resolve(true);
      }, time);
    });
  };
  const formItemLayout = {
    labelCol: { span: 4 },
    wrapperCol: { span: 8 },
  };

  return (
    <PageHeaderWrapper>
      <ProCard style={{ paddingTop: '61px' }}>
        <ProForm<{
          name: string;
          company?: string;
          useMode?: string;
        }>
          {...formItemLayout}
          layout="horizontal"
          onFinish={async (values) => {
            await waitTime(2000);
            console.log(values);
            setLoading(false);
            message.success('提交成功');
          }}
          params={{}}
          submitter={{
            render: (props, doms) => {
              return (
                <div style={{ textAlign: 'center', marginTop: '220px', marginBottom: '100px' }}>
                  <Button
                    type="primary"
                    htmlType="submit"
                    style={{ margin: '0 8px' }}
                    loading={loading}
                  >
                    提交
                  </Button>
                  <Button
                    style={{ margin: '0 8px' }}
                    onClick={() => {
                      props.form?.resetFields();
                      history.goBack();
                    }}
                  >
                    取消
                  </Button>
                  <Button
                    type="primary"
                    ghost
                    style={{ margin: '0 8px' }}
                    onClick={() => {
                      props.form?.resetFields();
                    }}
                  >
                    重置
                  </Button>
                </div>
              );
            },
          }}
        >
          <Form.Item
            name="gender"
            label="短信模板"
            rules={[{ required: true }]}
            initialValue={{ muban: '1' }}
          >
            <Row>
              <Col span={16} style={{ paddingRight: '160px', width: '100%' }}>
                <Select placeholder="请选择短信模板" allowClear defaultValue={'1'}>
                  <Option value="1">邀请二面默认模板</Option>
                  <Option value="2">未通过默认模板</Option>
                  <Option value="3">自定义邮件</Option>
                </Select>
              </Col>
              <Col span={8}>
                <Button
                  type="primary"
                  key="primary"
                  ghost
                  size="small"
                  style={{ borderRadius: '4px' }}
                  onClick={() => {
                    setVisible(true);
                  }}
                >
                  添加模板
                </Button>
                &nbsp;&nbsp;&nbsp;
                <Button danger size="small" style={{ borderRadius: '4px' }}>
                  删除模板
                </Button>
              </Col>
              <Col span={15}>
                <TextArea
                  showCount
                  rows={4} defaultValue={`不好意思，你不满足我们的条件：
1.我们不招不喝奶茶的年轻人；
2.您没有强大的胸肌。`}
                  maxLength={200}
                  style={{ width: '100%', paddingTop: '20px' }}
                />
              </Col>
            </Row>
          </Form.Item>
          <Form.Item
            label="定时发送"
            name="dingshi"
            required
            rules={[{ required: true }]}
            initialValue={{ muban: '1' }}
          >
            <Row>
              <Col span={7} style={{ width: '150px', paddingRight: '10px' }}>
                <Select placeholder="请选择" allowClear defaultValue={'1'}>
                  <Option value="1">立即发送</Option>
                  <Option value="2">定时发送</Option>
                </Select>
              </Col>
              <Col span={7} style={{ width: '150px', paddingRight: '10px' }}>
                <DatePicker defaultValue={moment(today)}  />
              </Col>
              <Col span={7}>
                <TimePicker
                  minuteStep={15}
                  defaultValue={moment('08:00', format)}
                  format={format}
                />
              </Col>
            </Row>
          </Form.Item>
        </ProForm>
        <Modal
          footer={false}
          visible={visible}
          onCancel={() => {
            setVisible(false);
          }}
          width={800}
        >
          <ProForm<{
            name: string;
            company?: string;
            useMode?: string;
          }>
            style={{ paddingLeft: '85px', paddingTop: '25px' }}
            layout="horizontal"
            onFinish={async (values) => {
              await waitTime(2000);
              console.log(values);
              setLoading(false);
              message.success('提交成功');
            }}
            params={{}}
            submitter={{
              render: (props, doms) => {
                return (
                  <div style={{ textAlign: 'center', marginTop: '90px', marginBottom: '10px' }}>
                    <Button
                      type="primary"
                      htmlType="submit"
                      style={{ margin: '0 8px' }}
                      loading={loading}
                    >
                      确定
                    </Button>
                    <Button
                      style={{ margin: '0 8px' }}
                      onClick={() => {
                        props.form?.resetFields();
                        setVisible(false);;
                      }}
                    >
                      取消
                    </Button>
                    <Button
                      type="primary"
                      ghost
                      style={{ margin: '0 8px' }}
                      onClick={() => {
                        props.form?.resetFields();
                      }}
                    >
                      重置
                    </Button>
                  </div>
                );
              },
            }}
          >
            <Form.Item name="gender" label="模板名称" rules={[{ required: true }]} initialValue="">
              <Input placeholder="模板名称" style={{ width: '220px' }} />
            </Form.Item>
            <Form.Item
              label="文案内容"
              name="dingshi"
              required
              rules={[{ required: true }]}
              initialValue="不好意思，你不满足我们的条件：
              1.我们不招不喝奶茶的年轻人；
              2.您没有强大的胸肌。"
            >
              <TextArea showCount rows={4} maxLength={200} style={{ width: '330px' }} />
            </Form.Item>
          </ProForm>
        </Modal>
      </ProCard>
    </PageHeaderWrapper>
  );
};

export default Interview;
